<template>
  <div class="container">
    <div class="left-column">
      <LeftMenu :treeData="leftData" />
      :selectedChild="selectedChild"
      <!-- @setSelectedChild="handleSelectedChild" -->
    </div>
    <div class="right-column">
      <RightMenu :arr="rightData" />

      <!-- :selectedChildren="getSelectedChildren(treeData, selectedChild)" -->
      <!-- :selectedGrandchild="selectedGrandchild" -->
      <!-- @setSelectedGrandchild="handleSelectedGrandchild" -->

      <pre>{{ rightData }}</pre>
    </div>
  </div>
</template>
<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';

import LeftMenu from './LeftMenu.vue';
import RightMenu from './RightMenu.vue';

export default {
  name: 'virtualProductList',
  mixins: [], //混入
  components: {
    //组件
    LeftMenu,
    RightMenu,
  },
  props: {}, //集成属性
  data() {
    return {
      originalData: [],
      treeData: [
        {
          id: 1,
          name: '一级菜单1',
          children: [
            {
              id: 11,
              name: '二级菜单1-1',
              children: [
                { id: 111, name: '三级菜单1-1-1' },
                { id: 112, name: '三级菜单1-1-2' },
              ],
            },
            {
              id: 12,
              name: '二级菜单1-2',
              children: [{ id: 121, name: '三级菜单1-2-1' }],
            },
          ],
        },
        {
          id: 2,
          name: '一级菜单2',
          children: [
            {
              id: 21,
              name: '二级菜单2-1',
              children: [{ id: 211, name: '三级菜单2-1-1' }],
            },
          ],
        },
      ],

      selectedChild: null,
      selectedGrandchild: null,
    };
  },
  computed: {
    ...mapState([]),
    leftData: function() {
      let oArr = this.originalData;
      let resArr = oArr.map((v) => {
        return v;
      });
      return resArr;
    },
    rightData: function() {
      let oArr = this.originalData;
      let resArr = [];
      function traverse(node) {
        if (node.children && Array.isArray(node.children)) {
          node.children.forEach((child) => traverse(child));
        } else {
          // 如果当前节点没有children属性或者children不是数组，则它可能是一个具体的物品
          // 注意：这个逻辑假设所有叶子节点都是物品，这可能需要根据你的实际数据结构进行调整
          resArr.push(node);
        }
      }
      // 遍历顶级分类
      oArr.forEach((category) => traverse(category));

      return resArr;
    },
  },
  methods: {
    ...mapMutations([]),
    test: function() {
      console.log('test');
    },
    formatData(arr) {
      return arr.map((v) => {
        return v;
      });
    },
    ajaxData() {
      this.$api
        .get虚拟商品列表()
        .then((res) => {
          if (res.code == 200) {
            let tar = this.originalData;
            tar.splice(0, tar.length);
            tar.push(...this.formatData(res.data));
          }
        })
        .catch((err) => {
          console.error(err);
        })
        .finally((_) => {});
    },

    // handleSelectedChild(child) {
    //   this.selectedChild = child;
    //   this.$nextTick(() => {
    //     const rightMenu = this.$refs.rightMenu.$el;
    //     const target = rightMenu.querySelector(`li[data-id="${child.id}"]`);
    //     if (target) {
    //       target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    //     }
    //   });
    // },
    // handleSelectedGrandchild(grandchild) {
    //   this.selectedGrandchild = grandchild;
    //   this.$nextTick(() => {
    //     const leftMenu = this.$refs.leftMenu.$el;
    //     const target = leftMenu.querySelector(
    //       `li[data-id="${this.findParentId(grandchild)}"]`
    //     );
    //     if (target) {
    //       target.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    //     }
    //   });
    // },
    // getSelectedChildren(tree, selectedChild) {
    //   return tree.flatMap((item) =>
    //     item.children &&
    //     item.children.find((child) => child.id === selectedChild.id)
    //       ? [item]
    //       : []
    //   );
    // },
    // findParentId(grandchild) {
    //   let parentId = null;
    //   this.treeData.forEach((item) => {
    //     if (item.children) {
    //       const child = item.children.find(
    //         (child) =>
    //           child.children &&
    //           child.children.find((gc) => gc.id === grandchild.id)
    //       );
    //       if (child) {
    //         parentId = child.id;
    //       }
    //     }
    //   });
    //   return parentId;
    // },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    this.ajaxData();
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  height: 100vh; /* Adjust based on your needs */
}
.left-column,
.right-column {
  flex: 1;
  overflow: hidden;
  height: 100%;
  border: 1px solid #ccc; /* Just for visualization */
}
</style>
